<template>
  <div class="leftItem">
    <div class="item" :class="[{active:this.active},isActive]">
      <a href="javascript:;" class="item-a" @click="itemClick">
        <div class="left-img" v-show="!this.active">
          <slot name="img"></slot>
        </div>
        <div class="left-img" v-show="this.active">
          <slot name="a-img"></slot>
        </div>

        <slot name="title"></slot>

        <div class="right-img" v-show="!this.active">
          <slot name="right_img"></slot>
        </div>
        <div class="right-img" v-show="this.active">
          <slot name="down_img"></slot>
        </div>
      </a>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "leftItem",
  data(){
    return{
      active:false
    }
  },
  props: {
    name:{
        type: String,
        required: true
    }
  },
  computed: {
    isActive() {
      return 'Leftitem' + this.name
    }
  },
  methods: {
    itemClick() {
      this.active = true
      let jqName = '.Leftitem' + this.name
      if (this.active === true) {
          if($(jqName).find('ul').css('display') == 'block'){
            //$(jqName).removeClass('active')
            //console.log(that.$parent.getchildIsOpen)
            setTimeout( () => { this.active = false },400)
            
            //this.$parent.getchildIsOpen.splice(0,this.$parent.getchildIsOpen.length)
            //this.$parent.getchildIsOpen.push({'name':this.name,'active':this.active})
            
          }
          $(jqName).find('ul').stop().toggle("500")

      }

    }
  },
  watch:{
    'active':function(newVal,oldVle){
      
    },
    deep: true,
    immediate: true
  }
}
</script>

<style scoped>
.item {
  position: relative;
  display: block;
}
.item .item-a {
  display: block;
  padding: 18px 30px;
  color: #aeb7c2;
  border-left: 5px solid transparent;
}
.item a:hover {
  color: #ffffff;
}
.item a p {
  display: inline-block;
}
.item a img {
  margin-top: 2px;
}
.item a .left-img {
  margin-right: 15px;
  float: left;
}
.item a .right-img {
  margin-left: 60px;
  float: right;
}
.active {
  background-color: #252c35;
  border-left: 5px solid #00aaff !important;
  color: #ffffff !important;
}
</style>